const { defineConfig } = require('@vue/cli-service')
const path = require('path')

module.exports = defineConfig({
  // 让控制台日志更清晰，便于识别启动信息
  lintOnSave: false,
  
  // 配置开发服务器
  devServer: {
    host: 'localhost',
    port: 8088,
    open: false, // 不自动打开浏览器
    
    // 代理配置，连接后端
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:8000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/api'
        }
      }
    },
    
    // 禁用主机检查，允许外部访问
    allowedHosts: 'all',
    
    // 优化日志输出
    client: {
      logging: 'error', // 只显示错误，不显示警告
      overlay: {
        // 配置覆盖层，不显示警告，只显示错误
        errors: true,
        warnings: false,
        // 添加自定义过滤器，不显示 ResizeObserver 相关错误
        runtimeErrors: (error) => {
          // 过滤掉 ResizeObserver 错误
          if (error.message && error.message.includes('ResizeObserver')) {
            return false;
          }
          // 过滤掉 HMR 相关错误
          if (error.message && error.message.includes('HMR')) {
            return false;
          }
          // 过滤掉 webpack 相关错误
          if (error.message && error.message.includes('webpack')) {
            return false;
          }
          return true;
        }
      }
    },
    
    // 减少控制台输出
    webSocketServer: {
      options: {
        clientLogLevel: 'error' // 只显示错误
      }
    }
  },
  
  // 配置输出
  outputDir: 'dist',
  assetsDir: 'static',
  
  // 快速构建优化
  productionSourceMap: false,
  
  // 配置公共路径
  publicPath: '/',
  
  // css配置，全局注入SCSS变量和新的API用法
  css: {
    loaderOptions: {
      scss: {
        // 全局注入 SCSS 变量和新 API 使用
        additionalData: `@use "src/styles/global.scss" as *;`,
        sassOptions: {
          outputStyle: 'compressed'
        }
      },
      sass: {
        // 使用新的 API 语法，避免弃用警告
        additionalData: `@use "sass:math"\n`,
        sassOptions: {
          outputStyle: 'compressed'
        }
      }
    }
  },
  
  // 使用ESLint的更快插件
  chainWebpack: config => {
    // 优化性能
    config.optimization.splitChunks({
      chunks: 'all'
    });
    
    // 配置 webpack-dev-server 客户端，来禁用特定错误的覆盖层
    if (process.env.NODE_ENV === 'development') {
      // 禁用 webpack 控制台输出
      config.stats('errors-only');
      
      // 配置热重载
      config.module
        .rule('vue')
        .use('vue-loader')
        .tap(options => {
          return {
            ...options,
            hotReload: true
          };
        });
      
      // 使用新的 Sass 语法，对所有 SCSS 文件预处理
      config.module
        .rule('scss')
        .oneOf('vue-modules')
        .use('sass-loader')
        .tap(options => {
          options = options || {};
          return {
            ...options,
            // 强制使用 Dart Sass 的新 JavaScript API
            sassOptions: {
              ...options.sassOptions,
              outputStyle: 'compressed'
            }
          };
        });
        
      config.module
        .rule('scss')
        .oneOf('vue')
        .use('sass-loader')
        .tap(options => {
          options = options || {};
          return {
            ...options,
            // 强制使用 Dart Sass 的新 JavaScript API
            sassOptions: {
              ...options.sassOptions,
              outputStyle: 'compressed'
            }
          };
        });
        
      config.module
        .rule('scss')
        .oneOf('normal')
        .use('sass-loader')
        .tap(options => {
          options = options || {};
          return {
            ...options,
            // 强制使用 Dart Sass 的新 JavaScript API
            sassOptions: {
              ...options.sassOptions,
              outputStyle: 'compressed'
            }
          };
        });
    }
  }
}) 